<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				width: 800px;
				height: 500px;
				text-align: center;
				margin: 0px auto;
			}
			th{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr>
				<td class="bd1"></td>
				<td class="bd2"></td>
				<td class="bd3"></td>
			</tr>
			<tr>
				<td class="bd1"></td>
				<td class="bd2"></td>
				<td class="bd3"></td>
			</tr>
			<tr >
				<td class="bd1"></td>
				<td class="bd2"></td>
				<td class="bd3"></td>
			</tr>
			<tr>
				<td class="bd1"></td>
				<td class="bd2"></td>
				<td class="bd3"></td>
			</tr>
			
		</table>
	</body>
	<script type="text/javascript">
		var arr = [{
				name: "张三",
				age: 20,
				sex: "男"
			},
			{
				name: "李四",
				age: 18,
				sex: "男"
			},
			{
				name: "好耶",
				age: 2,
				sex: "女"
			},
			{
				name: "王二",
				age: 20,
				sex: "男"
			}
		];
		var count =1;
		for(var i = 0;i<arr.length;i++){
			count++;
			var tding = document.getElementsByClassName("bd1");
			var tding1 = document.getElementsByClassName("bd2");
			var tding2 = document.getElementsByClassName("bd3");
			tding[i].innerHTML = arr[i].name;
			tding1[i].innerHTML = arr[i].age;
			tding2[i].innerHTML = arr[i].sex;
			if(count%2 == 0){
				var tring = document.getElementsByTagName("tr");
				tring[i].style.cssText = "background-color: red;"
			}else{
				tring[i].style.cssText = "background-color: skyblue;"
				tring[4].style.cssText = "background-color: red;"
			}
		}
	</script>
</html>
